<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fe 13</title>
    <style>
        .done {
            color: lightgray;
            text-decoration: line-through;
        }

        .model-alert {
            positon: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: black;
            opacity: 0.5;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <!--<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>-->
    <script src="juranAlert.js"></script>
</head>
<body>
<div class="main">
    <div class="form">
        <input id="id-input-add" name="name" value="">
        <br>
        <button id="id-button-add" type="button" name="button">Add</button>
    </div>
    <div class="" id="id-div-todo">
        <div class="todo-cell" data-id="401">
            <span><h1>hello</h1></span>
            <div class="">
                <button class="edit-button" type="button" name="button">edit</button>
                <button class="delete-button" type="button" name="button">delete</button>
                <button class="complete-button" type="button" name="button">complete</button>
            </div>
        </div>
        <div class="todo-cell" data-id="101">
            <span><h1>world</h1></span>
            <div class="">
                <button class="edit-button" type="button" name="button">edit</button>
                <button class="delete-button" type="button" name="button">delete</button>
                <button class="complete-button" type="button" name="button">complete</button>
            </div>
        </div>
    </div>
</div>
<div class="model-alert">
    <div class="model-title">
        弹窗
    </div>
    <button type="button" name="button">ok</button>
</div>
<script>
    var todoTemplate = function (todo) {
        var t = `
        <div class="todo-cell">
            <span>${todo}</span>
            <div class="">
                <button class="edit-button" type="button" name="button">edit</button>
                <button class="delete-button" type="button" name="button">delete</button>
                <button class="complete-button" type="button" name="button">complete</button>
            </div>
        </div>
        `
        return t
    }
    //jquery 绑定事件
    $('#id-button-add').on('click', function (event) {
        console.log('click')
        var todo = $('#id-input-add').val()
        $('#id-div-todo').append(todoTemplate(todo))
    })

    //jQuery事件委托
    // $('#id-div-todo').on('click', '.delete-button', function (event) {
    //     console.log('click')
    //     var button = $(event.target)
    //     button.closest('.todo-cell').remove()
    // })

    //结合fe14
    $('#id-div-todo').on('click', '.delete-button', function (event) {
        console.log('click')
        JuranAlert2('注意', '确认要删除Todo吗?', function (r) {
            console.log('按钮回调', r)
            if (r) {
                var button = $(event.target)
                button.closest('.todo-cell').remove()
            }
        })
    })

    $('#id-div-todo').on('click', '.complete-button', function (event) {
        console.log('click 完成')
        var button = $(event.target)
        var span = button.closest('.todo-cell').find('span')
        span.toggleClass('done')
    })

    $('#id-div-todo').on('click', '.edit-button', function (event) {
        console.log('click edit')
        var button = $(event.target)
        var span = button.closest('.todo-cell').find('span')
        var t = span.text()
        console.log('span.text', t)
    })

    $('#id-input-add').on('keydown', function (event) {
        console.log('key down', event)
    })
    //数组操作：
    //之前：循环
    var cells = $('.todo-cell')
    for (var i = 0; i < cells.length; i++) {
        var c = cells[i]
        console.log('cell', i, c)
    }
    //遍历，对每个元素调用函数，参数是index和 element
    $('.todo-cell').each(function (i, e) {
        console.log(i, e)
    })

    //map操作
    //其实就是process函数
    //对每个数组中的元素，调用函数得到返回值组成新的数组
    var foo = [1, 2, 3, 4, 5]
    var bar = $.map(foo, function (value) {
        return value * value
    })

    //相当于filter
    var far = $.grep(foo, function (value) {
        return value % 2 == 0
    })

    //if不要用隐含条件，条件一定要是一个布尔值
    var c = 1
    if (c !== 0) {

    }

    var b = true
    if (b) {

    }
</script>
</body>
</html>